<template>
    <el-select
      class="!w-60 my-4 ml-2"
      v-model="stuClass"
      placeholder="请选择查看的班级"
      @change="select"
    >
      <el-option v-for="item in setClass" :key="item.label" :label="item.label" :value="item.label">
      </el-option>
    </el-select>
    <el-input
      placeholder="请输入学生姓名"
      v-model="stuName"
      class="stu-name"
      clearable
      v-if="isAdmin"
    >
    </el-input>
    <el-button :icon="Search" @click="search" class="search-btn" circle v-if="isAdmin"></el-button>
    <el-table
      :data="tableData"
      style="width: 100% ;"
      :default-sort="{ prop: 'time', order: 'descending' }"
    >
      <el-table-column label="学号" width="150">
        <template v-slot="scope">
          <span @click="change(scope)">{{ scope.row.student_id }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="Student_Name" label="学号" width="100"> </el-table-column> -->
      <el-table-column prop="grade" label="年级" width="60"> </el-table-column>
      <el-table-column prop="student_name" label="姓名" width="80"> </el-table-column>
      <el-table-column prop="Department_Name" label="所属系部" width="100"> </el-table-column>
      <el-table-column prop="major" label="所属专业" width="150"> </el-table-column>
      <el-table-column prop="student_sex" label="性别" width="60"> </el-table-column>
      <el-table-column prop="Classe" label="班级" width="60"> </el-table-column>
      <el-table-column prop="Student_Tel" label="手机号码" width="180"> </el-table-column>
      <el-table-column prop="created_at" label="入校日期" width="180" sortable> </el-table-column>
      <el-table-column label="删除" v-if="isTeacher != 'teacher'">
        <template v-slot="scope">
          <el-button
            type="danger"
            :icon="Delete"
            circle
            @click="remove(scope.row.id, scope.$index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-6 flex justify-center">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="max"
        @current-change="page($event)"
      >
      </el-pagination>
    </div>
  </template>
  <script setup>
  import { ref, computed , onMounted} from "vue";
  import api from "@/modules/api";
  import studentManage from "@/modules/student/studentManage";
  
  import deleteUser from "@/modules/common/delete-user";
  import { useRouter } from "vue-router";
  import { Delete, Search } from "@element-plus/icons-vue";
  import { ElLoading, ElMessage } from "element-plus";
  
  let isAdmin = localStorage.id == "admin";
  let isTeacher = localStorage.id;
  let router = useRouter();
  let data = ref([]);
  let offset = ref(1); // 默认从第一页开始
  let pageSize = ref(10); // 一页最多能显示 20 条数据
  let max = ref(0);
  let index = ref(0);
  
  // 计算属性，根据当前页码和每页显示数量来分页显示数据
  let tableData = computed(() => {
    return data.value.slice(index.value * 10, (index.value + 1) * 10);
  });
  
  
  /**
   * 翻页请求
   * @param {*} page 页码 
   */
  function page(page) {
    // 翻页请求
    console.log(page);
    offset.value = page;
    init(page)
  }
  
  // api(`select * from student`).then(res => {
  //   data.value = res.res;
  //   max.value = res.res.length;
  // });
  
  /**
   * 初始化加载
   * @param {*} page 页码
   */
  const  init = async (page = 1) =>{
    try {
  
      let res =  await studentManage({ 
        page :!page ? offset.value : page, 
        size : pageSize.value , 
        grade : localStorage.getItem("grade"),
        major_id : localStorage.getItem("major_id"),
        class_name : localStorage.getItem("class_name")
    });
      if(res.success){
        data.value = res.students,
        max.value = res.totalStudents
      }else{
        ElMessage({
          message: "查询失败",
          type: "error",
        })
  
      }
  
    } catch (error) {
      
    }
  }
  
  onMounted (() =>{
  
    init()
  })
  
  
  
  function change(data) {
    if (localStorage.id == "admin") {
      router.push({ path: "/updata-student", query: { id: data.row.id } });
    }
  }
  
  /**
   * 删除学生信息
   * @param {*} id 学生id
   * @param {*} index 
   */
  function remove(id, index) {
    deleteUser({ col: "student", id: id }).then(res => {
      if (res.res) {
        api(`DELETE FROM achievement WHERE stucode='${id}';`).then(res => {
          router.go(0);
        });
      }
    });
  }
  let stuClass = ref("");
  let setClass = ref([
    {
      label: "软件工程1班",
    },
    {
      label: "软件工程2班",
    },
    {
      label: "软件工程3班",
    },
    {
      label: "软件工程4班",
    },
    {
      label: "软件工程5班",
    },
    {
      label: "软件工程6班",
    },
  ]);
  
  function select() {
    api(`select * from student where class='${stuClass.value}';`).then(res => {
      data.value = res.res;
    });
  }
  let stuName = ref("");
  
  // chaxun xinming 
  function search() {
    console.log(stuName.value);
    
    studentManage({ page :offset.value, size : pageSize.value , name : stuName.value }).then(res =>{
      
      if(res.success){
          data.value = res.students
          max.value = res.totalStudents
      }
      
    })
    
  }
  </script>
  <style scoped lang="scss">
    .stu-name {
      width: 200px;
      margin-left: 20px;
    }
    .search-btn {
      margin-left: 10px;
    }
  
    .el-table .cell {
      text-align: center;
    }
  </style>
  